<template>
  <div>
    <el-card>
      <el-form :model="datas.dataForm" label-width="120"  ref="dataFormRef" :rules="datas.rules">
        <el-table :data="datas.dataForm.mainTab" style="width: 100%" :height="datas.dataForm.mainTab.length >= 10 ? '370' : 'auto'" class="main_tab">
            <template #default>
                <el-table-column prop="widgetName" min-width="100" header-align="center" align="center" label="组件名称">
                  <template #default="scope">
                    <el-form-item>
                      <span>{{ scope.row.widgetName }}</span>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="columnName" min-width="100" header-align="center" align="center" label="数据库字段名">
                  <template #default="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.columnName"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="columnType" min-width="100" header-align="center" align="center" label="类型">
                  <template #default="scope">
                    <el-form-item>
                      <el-select v-model="scope.row.columnType" placeholder="请选择类型" @change='mainTabSelectChangeFn(scope.row,$event)'>
                        <el-option
                          v-for="(item, index) in datas.columnTypeList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="required" min-width="100" header-align="center" align="center" label="是否必填">
                  <template #default="scope">
                    <el-form-item :prop="'mainTab.' + scope.$index + '.required'" :rules="datas.rules.required">
                      <DicSelect :clearable='false' v-model="scope.row.required" dicCode='IF_KEY' placeholder="请选择是否主键" style="width:100%"></DicSelect>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="primary" min-width="100" header-align="center" align="center" label="主键">
                  <template #default="scope">
                    <el-form-item :prop="'mainTab.' + scope.$index + '.primary'" :rules="datas.rules.primary">
                      <DicSelect :clearable='false' v-model="scope.row.primary" dicCode='IF_KEY' placeholder="请选择是否主键" style="width:100%"></DicSelect>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="columnLength" min-width="100" header-align="center" align="center" label="最大长度限制">
                  <template #default="scope">
                    <el-form-item v-if="scope.row.columnType === 'FLOAT' || scope.row.columnType === 'DECIMAL' || scope.row.columnType === 'CHAR' || scope.row.columnType === 'VARCHAR'">
                      <el-input v-model="scope.row.columnLength" @input="columnLengthFn($event, scope.row)" 
                      oninput="const t = value.charAt(0);
                      value = value.replace(/[^\d]/g, '')
                      "></el-input>
                    </el-form-item>

                    <span v-else> {{ `${scope.row.columnType} 此类型无需设置` }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="places" min-width="100" header-align="center" align="center" label="保留小数位">
                  <template #default="scope">
                    <el-form-item v-if="scope.row.columnType === 'FLOAT' || scope.row.columnType === 'DECIMAL'">
                      <el-input v-model="scope.row.places" @input="placesFn($event, scope.row)" oninput="const t = value.charAt(0); value = value.replace(/[^\d]/g, '')"></el-input>
                    </el-form-item>

                    <span v-else> {{ `${scope.row.columnType} 此类型无需设置` }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="columnDes" min-width="100" header-align="center" align="center" label="字段描述">
                  <template #default="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.columnDes"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
            </template>
        </el-table>

        <el-divider />
        <div v-for="(tableData, tableName) in datas.dataForm.subTab" :key="tableName">
            <el-table :data="tableData" style="width: 100%" :height="tableData.length >= 10 ? '370' : 'auto'" class="main_tab">
              <template #default>
                <el-table-column prop="widgetName" min-width="100" header-align="center" align="center" label="组件名称">
                    <template #default="scope">
                      <el-form-item>
                        <span>{{ scope.row.widgetName }}</span>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column prop="columnName" min-width="100" header-align="center" align="center" label="数据库字段名">
                  <template #default="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.columnName"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="columnType" min-width="100" header-align="center" align="center" label="类型">
                  <template #default="scope">
                    <el-form-item>
                      <el-select v-model="scope.row.columnType" placeholder="请选择类型" @change='subTabSelectChangeFn(scope.row,$event)'>
                        <el-option
                          v-for="(item, index) in datas.columnTypeList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="required" min-width="100" header-align="center" align="center" label="是否必填">
                  <template #default="scope">
                    <el-form-item :prop="'mainTab.' + scope.$index + '.required'" :rules="datas.rules.required2">
                      <DicSelect :clearable='false' v-model="scope.row.required" dicCode='IF_KEY' placeholder="请选择是否主键" style="width:100%"></DicSelect>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="primary" min-width="100" header-align="center" align="center" label="主键">
                  <template #default="scope">
                    <el-form-item :prop="'mainTab.' + scope.$index + '.primary'" :rules="datas.rules.primary2">
                      <DicSelect :clearable='false' v-model="scope.row.primary" dicCode='IF_KEY' placeholder="请选择是否主键" style="width:100%"></DicSelect>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="columnLength" min-width="100" header-align="center" align="center" label="最大长度限制">
                  <template #default="scope">
                    <el-form-item v-if="scope.row.columnType === 'FLOAT' || scope.row.columnType === 'DECIMAL' || scope.row.columnType === 'CHAR' || scope.row.columnType === 'VARCHAR'">
                      <el-input v-model="scope.row.columnLength" @input="columnLengthFn($event, scope.row)" 
                      oninput="const t = value.charAt(0);
                      value = value.replace(/[^\d]/g, '')
                      "></el-input>
                    </el-form-item>

                    <span v-else> {{ `${scope.row.columnType} 此类型无需设置` }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="places" min-width="100" header-align="center" align="center" label="保留小数位">
                  <template #default="scope">
                    <el-form-item v-if="scope.row.columnType === 'FLOAT' || scope.row.columnType === 'DECIMAL'">
                      <el-input v-model="scope.row.places" @input="placesFn($event, scope.row)" oninput="const t = value.charAt(0); value = value.replace(/[^\d]/g, '')"></el-input>
                    </el-form-item>

                    <span v-else> {{ `${scope.row.columnType} 此类型无需设置` }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="columnDes" min-width="100" header-align="center" align="center" label="字段描述">
                  <template #default="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.columnDes"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </template>
          </el-table>

          <el-divider />
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts" name='formFieldDesign'>
import { developApi } from '/@/api/sys/develop-api'
import { ref, reactive, onMounted, defineExpose, defineProps, defineEmits} from 'vue'
import { ElLoading, ElMessage, FormInstance } from 'element-plus'
import { getDataDictionaryList } from '/@/utils/cacheDic';
const props = defineProps<{ tab_obj: object }>() as any;
const dataFormRef = ref<FormInstance>()
const datas = reactive({
  dataDictionaryList: [] as any,
  dataForm: {
    mainTab: props.tab_obj.main,
    subTab: props.tab_obj.sub,
  },
  Format: {},
  columnTypeList: [],
  rules: {
    primary: [
      { required: true, message: '请选择是否主键', trigger: 'change' },
    ],
    primary2: [
      { required: true, message: '请选择是否主键', trigger: 'change' },
    ],
    required: [
      { required: true, message: '请选择是否必填', trigger: 'change' },
    ],
    required2: [
      { required: true, message: '请选择是否必填', trigger: 'change' },
    ],
  },

})
onMounted(() => {
  getDataBase()
   // 数据字典
	getDataDictionaryList(datas.dataDictionaryList, ['IF_KEY'])
})

const placesFn = (e: Number | String, row: any) => {
  if (Number(e) > 4) {
    ElMessage.error('保留小数位最多4位')
    row.places = 4
  }
}

const columnLengthFn = (e: Number | String, row: any) => {
  if (Number(e) > 2000) {
    ElMessage.error('最大长度限制不得大于2000')
    row.columnLength = 2000
  }
}

const subTabSelectChangeFn = (row: any, e: any) => {
  if (e == 'FLOAT' || e == 'DECIMAL' || e == 'CHAR'|| e == 'VARCHAR') {
    row.columnLength = 50
  }
}

const mainTabSelectChangeFn = (row: any, e: any) => {
  if (e == 'FLOAT' || e == 'DECIMAL' || e == 'CHAR'|| e == 'VARCHAR') {
    row.columnLength = 50
  }
}
//emit事件
const emit = defineEmits(['closeSetup'])
const closeSetup = () => {
  emit('closeSetup', false);
}

const submitForm = () => {
  if (!dataFormRef?.value) return
  dataFormRef.value?.validate((valid: boolean) => {
    if (!valid) return
    closeSetup()
  })
}
const getDataBase = () => {
  const loading = ElLoading.service({
       lock: true,
       text: '处理中',
       background: 'rgba(0, 0, 0, 0.7)',
   })
  developApi.getDataBaseColumnTypes().then(data => {
    if (data && data.code == 0) {
      datas.columnTypeList = data.data.map((item: any)  => {
        return {
          value: item,
          label: item,
        }
      })
    } else {
      ElMessage.error(data.message)
    }
  }).catch(() => {
    ElMessage.error('获取类型数据失败')
  }).finally(() => {
    loading.close()
  })
}
// 当前组件向外部暴露的方法/数据
defineExpose({
	datas,
  submitForm,
});
</script>

<style scoped>
.main_tab {
  margin-bottom: 20px;
}
.main_tab ::v-deep .el-table__body-wrapper {
  height: auto !important;
}
.main_tab ::v-deep .el-table__row .el-form-item .el-form-item__content {
  margin-left: 20px !important;
  /* margin-bottom: 20px !important; */
}
</style>